<template>
     <div id="User">
        <el-row>
    <el-col :span="20" style="padding-right: 10px;">
      <el-card class="box-card">
        <div class="login-info">
            <el-text class="userName" size="large">邮箱：{{ userStore.user.email }}</el-text>
            <p class="userName">{{ userStore.user.userName }}</p>
          <p>上次登录时间：<span>2023-10-19</span></p>
          <p>上次登录地点：<span>厦门</span></p>
        </div>
      </el-card>   
   
    </el-col>

  </el-row>
    </div>
    <div class="tools">
            <el-button type="info" @click="this.$router.push('/task02')" class="logout">主页</el-button>
            <el-button type="info" @click="logout" class="logout">退出</el-button>
           
    </div>
</template>
<script setup>
import { ref } from 'vue'
import { useUserStore } from '@/store/user';
import { useRouter } from 'vue-router';

const userStore = useUserStore()
const router = useRouter()



const logout = () => {
    userStore.$reset()
    router.push({
        path: '/task03/login'
    })
}

</script>
<style scoped>

.mt-5 {
    margin-top: 5px;
}

.userInfo {
    padding: 30px 0px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}



.userName {

    font-size: 16px;
    color: #060606;
}

.tools {
    padding: 275px 5px;
}

.logout {
    width: 175px;
}
</style>